<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="订单类型" prop="activityType">
        <el-select v-model="queryParams.activityType" placeholder="订单类型" clearable>
          <el-option
            v-for="item in activityTypeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="支付方式" prop="payType">
        <el-select v-model="queryParams.payType" placeholder="支付方式" clearable>
          <el-option
            v-for="item in payTypeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="创建时间" prop="createTime">
        <el-date-picker
          v-model="queryParams.createTime"
          type="daterange"
          align="right"
          unlink-panels
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="订单号" prop="orderSn">
        <el-input
          v-model="queryParams.orderSn"
          placeholder="请输入订单号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="UID" prop="uid">
        <el-input
          v-model="queryParams.uid"
          placeholder="请输入用户UID"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="用户姓名" prop="realName">
        <el-input
          v-model="queryParams.realName"
          placeholder="请输入用户姓名"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="用户电话" prop="userPhone">
        <el-input
          v-model="queryParams.userPhone"
          placeholder="请输入用户电话"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="商品名称" prop="orderGoodsNames">
        <el-input
          v-model="queryParams.orderGoodsNames"
          placeholder="请输入商品名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-sell"
          size="mini"
          @click="handleSell"
          v-hasPermi="['order:order:sell']"
        >订单核销</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['order:order:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['order:order:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="orderList" @selection-change="handleSelectionChange">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="商品总价:" class="demo_label__label__font width-70">
              <div class="demo_label__label__font__span">
                <span>{{ props.row.payPriceDown }}</span>
              </div>
            </el-form-item>
            <el-form-item label="商品总数:" class="demo_label__label__font width-70">
              <div class="demo_label__label__font__span">
                <span>{{ props.row.totalNum }}</span>
              </div>
            </el-form-item>
            <el-form-item label="下单时间:" class="demo_label__label__font width-70">
              <div class="demo_label__label__font__span">
                <span>{{ props.row.createTime }}</span>
              </div>
            </el-form-item>
            <el-form-item label="用户备注:" class="demo_label__label__font width-70 height-250">
              <div class="demo_label__label__font__span demo_label__label__font__span__width-250">
                <span>{{ props.row.mark }}</span>
              </div>
            </el-form-item>
            <el-form-item label="商家备注:" class="demo_label__label__font width-70 height-250">
              <div class="demo_label__label__font__span demo_label__label__font__span__width-250">
                <span>{{ props.row.remark }}</span>
              </div>
            </el-form-item>
            <el-form-item label="核销码:" class="demo_label__label__font width-55">
              <div class="demo_label__label__font__span">
                <span>{{ props.row.verifyCode }}</span>
              </div>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>

      <el-table-column type="selection" width="50" align="center" />
      <el-table-column label="订单id" align="center" prop="orderId" width="60" />
      <el-table-column label="订单号 | 类型" align="center" width="130">
        <template slot-scope="scope">
          <div class="vertical-content">
            <div>{{ scope.row.orderSn }}</div>
            <div :style="{ color: scope.row.activityTypeNameObj.color }">
              {{ scope.row.activityTypeNameObj.name }}
            </div>
            <div v-if="scope.row.isDel === '2'" style="color: rgb(237, 64, 20)">用户已删除</div>
            <div v-if="scope.row.status === 5" style="color: rgb(237, 64, 20)">订单已退款</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="商品信息" align="center" width="300">
        <template slot-scope="scope">
          <div v-for="(item, index) in scope.row.orderGoodsData" :key="item.id" class="product-item">
            <div class="product-info">
              <div class="product-image">
                <el-image
                  :src="domainPrefix + item.image"
                  fit="fill"
                  style="width: 50px; height: 50px;"
                ></el-image>
              </div>
              <div class="product-title">
                <el-tooltip placement="top" effect="dark">
                  <div slot="content" class="tooltip-content">
                    商品名称：{{ item.title }}<br />
                    支付价格：¥{{ item.total_price }}<br />
                    购买数量：{{ item.goods_num }}
                  </div>
                  <div class="ellipsis-text">{{ item.title }}</div>
                </el-tooltip>
              </div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="用户信息" align="center" width="130">
        <template slot-scope="scope">
          {{ scope.row.wechatNickname ? scope.row.wechatNickname : scope.row.realName }} | {{ scope.row.uid }}
        </template>
      </el-table-column>
      <el-table-column label="实际支付" align="center" prop="payPrice" width=""/>
      <el-table-column label="支付方式" align="center" prop="payType" width=""/>
      <el-table-column label="订单状态" align="center" width="">
        <template slot-scope="scope">
          <div class="vertical-content">
            <div>{{ scope.row.statusName }}</div>
            <div v-if="scope.row.refundStatus === 1">退款中</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="支付时间" align="center" prop="payTime" width="180"/>
      <el-table-column fixed="right" label="操作" align="center" class-name="small-padding fixed-width" width="125">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.canEdit && scope.row.paid === 0"
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['order:order:edit']"
          >修改</el-button>
          <el-button
            v-if="scope.row.orderType === 1 && scope.row.paid === 1 && scope.row.status === 1"
            size="mini"
            type="text"
            icon="el-icon-sell"
            @click="handleQuicklySell(scope.row)"
            v-hasPermi="['order:order:quickly:sell']"
          >立即核销</el-button>
          <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)" v-hasPermi="['order:order:pay', 'order:order:details','order:order:remark','order:order:refund','order:order:receive','order:order:remove']">
            <el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="handlePayOrder" icon="el-icon-finished"
                                v-hasPermi="['order:order:pay']" v-if="scope.row.paid === 0 && scope.row.payType === '线下支付'">立即付款</el-dropdown-item>
              <el-dropdown-item command="handleDetails" icon="el-icon-view"
                                v-hasPermi="['order:order:details']">订单详情</el-dropdown-item>
              <el-dropdown-item command="handleRemark" icon="el-icon-notebook-1"
                                v-hasPermi="['order:order:remark']" v-if="scope.row.paid === 1">订单备注</el-dropdown-item>
              <el-dropdown-item command="handleRefundOrder" icon="el-icon-position"
                                v-hasPermi="['order:order:refund']" v-if="scope.row.paid === 1 && scope.row.status !== 5 && scope.row.refundStatus !== 1">立即退款</el-dropdown-item>
              <el-dropdown-item command="handleReceiveOrder" icon="el-icon-shopping-cart-full"
                                v-hasPermi="['order:order:receive']" v-if="scope.row.paid === 1 && scope.row.status === 1">已收货</el-dropdown-item>
              <el-dropdown-item command="handleDelete" icon="el-icon-delete"
                                v-hasPermi="['order:order:remove']">订单删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <el-dialog :title="titleSell" :visible.sync="openSell" width="500px" append-to-body>
      <el-form ref="form" :model="formSell" :rules="rulesSell" label-width="80px">
        <el-form-item label="核销码:" prop="verifyCode">
          <el-input v-model="formSell.verifyCode" placeholder="请输入核销码" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFormSell">立即核销</el-button>
        <el-button @click="cancelSell">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="titleSave" :visible.sync="openSave" width="500px" append-to-body>
      <el-form ref="form" :model="formSave" :rules="rulesSave" label-width="120px">
        <el-form-item label="订单编号:" prop="orderSn">
          <el-input v-model="formSave.orderSn" placeholder="请输入订单编号" :disabled="true"/>
        </el-form-item>
        <el-form-item label="实际支付金额:" prop="payPrice">
          <el-input-number
            v-model.number="formSave.payPrice"
            :precision="2"
            :step="0.1"
            controls-position="right"
            :min="0"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFormSave">确 定</el-button>
        <el-button @click="cancelSave">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="titleRefund" :visible.sync="openRefund" width="500px" append-to-body>
      <el-form ref="form" :model="formRefund" label-width="120px">
        <el-form-item label="订单编号:" prop="orderSn">
          <el-input v-model="formRefund.orderSn" placeholder="请输入订单编号" :disabled="true"/>
        </el-form-item>
        <el-form-item label="退款金额:" prop="payPrice">
          <el-input-number
            v-model.number="formRefund.payPrice"
            :precision="2"
            :step="0.1"
            controls-position="right"
            :min="0"
            :max="formRefund.payPrice"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFormRefund">确 定</el-button>
        <el-button @click="cancelRefund">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="titleRemark" :visible.sync="openRemark" width="500px" append-to-body>
      <el-form ref="form" :model="formRemark" :rules="rulesRemark" label-width="120px">
        <el-form-item label="订单备注:" prop="remark">
          <el-input type="textarea" v-model="formRemark.remark" placeholder="请输入订单备注"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFormRemark">确 定</el-button>
        <el-button @click="cancelRemark">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 添加或修改订单管理对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="订单号" prop="orderSn">
          <el-input v-model="form.orderSn" placeholder="请输入订单号" />
        </el-form-item>
        <el-form-item label="用户id" prop="uid">
          <el-input v-model="form.uid" placeholder="请输入用户id" />
        </el-form-item>
        <el-form-item label="订单类型" prop="sharerUid">
          <el-input v-model="form.sharerUid" placeholder="请输入分享人id" />
        </el-form-item>
        <el-form-item label="用户姓名" prop="realName">
          <el-input v-model="form.realName" placeholder="请输入用户姓名" />
        </el-form-item>
        <el-form-item label="用户电话" prop="userPhone">
          <el-input v-model="form.userPhone" placeholder="请输入用户电话" />
        </el-form-item>
        <el-form-item label="详细地址" prop="userAddress">
          <el-input v-model="form.userAddress" placeholder="请输入详细地址" />
        </el-form-item>
        <el-form-item label="订单商品总数" prop="totalNum">
          <el-input v-model="form.totalNum" placeholder="请输入订单商品总数" />
        </el-form-item>
        <el-form-item label="订单总价" prop="totalPrice">
          <el-input v-model="form.totalPrice" placeholder="请输入订单总价" />
        </el-form-item>
        <el-form-item label="实际支付金额" prop="payPrice">
          <el-input v-model="form.payPrice" placeholder="请输入实际支付金额" />
        </el-form-item>
        <el-form-item label="平台方佣金" prop="platformCommission">
          <el-input v-model="form.platformCommission" placeholder="请输入平台方佣金" />
        </el-form-item>
        <el-form-item label="发起方佣金" prop="initiatorCommission">
          <el-input v-model="form.initiatorCommission" placeholder="请输入发起方佣金" />
        </el-form-item>
        <el-form-item label="分享者佣金" prop="sharerCommission">
          <el-input v-model="form.sharerCommission" placeholder="请输入分享者佣金" />
        </el-form-item>
        <el-form-item label="合作方佣金" prop="partnerCommission">
          <el-input v-model="form.partnerCommission" placeholder="请输入合作方佣金" />
        </el-form-item>
        <el-form-item label="支付状态：0.未支付 1.已支付" prop="paid">
          <el-input v-model="form.paid" placeholder="请输入支付状态：0.未支付 1.已支付" />
        </el-form-item>
        <el-form-item label="支付时间" prop="payTime">
          <el-date-picker clearable
                          v-model="form.payTime"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="请选择支付时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="备注" prop="mark">
          <el-input v-model="form.mark" type="textarea" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="核销码" prop="verifyCode">
          <el-input v-model="form.verifyCode" placeholder="请输入核销码" />
        </el-form-item>
        <el-form-item label="核销时间/收货时间" prop="verifyTime">
          <el-date-picker clearable
                          v-model="form.verifyTime"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="请选择核销时间/收货时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="核销客服 id" prop="verifyServiceId">
          <el-input v-model="form.verifyServiceId" placeholder="请输入核销客服 id" />
        </el-form-item>
        <el-form-item label="微信支付订单号(分账时有效)" prop="transactionId">
          <el-input v-model="form.transactionId" placeholder="请输入微信支付订单号(分账时有效)" />
        </el-form-item>
        <el-form-item label="自定义表单数据" prop="orderExtend">
          <el-input v-model="form.orderExtend" type="textarea" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="商户id" prop="merId">
          <el-input v-model="form.merId" placeholder="请输入商户id" />
        </el-form-item>
        <el-form-item label="是否删除：0代表存在 2代表删除）" prop="isDel">
          <el-input v-model="form.isDel" placeholder="请输入是否删除：0代表存在 2代表删除）" />
        </el-form-item>
        <el-form-item label="后台删除标志" prop="delFlag">
          <el-input v-model="form.delFlag" placeholder="请输入后台删除标志" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <el-drawer
      title="订单详情"
      :visible.sync="tableOrder"
      direction="rtl"
      size="60%">
      <div class="striping"></div>
      <!-- 注意这里没有额外的 margin-top div，因为横线已经位于顶部 -->
      <div class="self-adaption"> <!-- 调整高度以适应内容和其他元素 -->
        <div>
          <div class="head">
            <div class="full">
<!--              <i class="el-icon-notebook-2" style="width: 60px; height: 60px; font-size: 60px; color: #0256ff;"></i>-->
              <img :src="orderData.orderIcon" class="order_icon">
              <div class="text">
                <div class="title" style="">普通订单</div>
                <div>
                  <span class="mr20">订单号：{{ orderData.orderSn }}</span>
                </div>
              </div>
            </div>
            <ul class="list">
              <li class="item">
                <div class="title">订单状态</div>
                <div>{{ orderData.getStatusName }}</div>
              </li>
              <li class="item">
                <div class="title">实际支付</div>
                <div>¥ {{ orderData.payPrice }}</div>
              </li>
              <li class="item">
                <div class="title">支付方式</div>
                <div>{{ orderData.payTypeName }}</div>
              </li>
              <li class="item">
                <div class="title">支付时间</div>
                <div>{{ orderData.payTime }}</div>
              </li>
            </ul>
          </div>
          <el-tabs type="border-card">
            <el-tab-pane label="订单信息">
              <div class="el-tabs__content">
                <div class="el-tab-pane">
                  <!--用户信息-->
                  <div class="section">
                    <div class="title" style="text-align: left">用户信息</div>
                    <ul class="list">
                      <li class="item">
                        <div>用户名称：</div>
                        <div class="value">{{ orderData.memberData.wechat_nickname }}</div>
                      </li>
                      <li class="item">
                        <div>绑定电话：</div>
                        <div class="value">{{ orderData.memberData.binding_phone ? orderData.memberData.binding_phone : orderData.userPhone }}</div>
                      </li>
                    </ul>
                  </div>
                  <!--收货信息-->
                  <div class="section">
                    <div class="title" style="text-align: left">收货信息</div>
                    <ul class="list">
                      <li class="item">
                        <div>收货人：</div>
                        <div class="value">{{ orderData.realName }}</div>
                      </li>
                      <li class="item">
                        <div>收货电话：</div>
                        <div class="value">{{ orderData.userPhone }}</div>
                      </li>
                      <li class="item">
                        <div>收货地址：</div>
                        <div class="value">{{ orderData.userAddress }}</div>
                      </li>
                    </ul>
                  </div>
                  <!--订单信息-->
                  <div class="section">
                    <div class="title" style="text-align: left">订单信息</div>
                    <ul class="list">
                      <li class="item">
                        <div>创建时间：</div>
                        <div class="value">{{ orderData.createTime }}</div>
                      </li>
                      <li class="item">
                        <div>商品总数：</div>
                        <div class="value">{{ orderData.totalNum }}</div>
                      </li>
                      <li class="item">
                        <div>商品总价：</div>
                        <div class="value">{{ orderData.totalPrice }}</div>
                      </li>
                      <li class="item">
                        <div>实际支付：</div>
                        <div class="value">{{ orderData.payPrice }}</div>
                      </li>
                    </ul>
                  </div>
                  <!--买家留言-->
                  <div class="section">
                    <div class="title" style="text-align: left">买家留言</div>
                    <ul class="list">
                      <li class="item">
                        <div>{{ orderData.mark ? orderData.mark : '-' }}</div>
                      </li>
                    </ul>
                  </div>
                  <!--订单备注-->
                  <div class="section">
                    <div class="title" style="text-align: left">订单备注</div>
                    <ul class="list">
                      <li class="item">
                        <div>{{ orderData.remark ? orderData.remark : '-' }}</div>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="商品信息">
              <el-table :data="this.orderData.orderGoodsData">
                <el-table-column label="商品信息" width="300">
                  <template slot-scope="scope">
                    <div class="product-info">
                      <div class="product-image">
                        <el-image
                          :src="domainPrefix + scope.row.image"
                          fit="fill"
                          style="width: 50px; height: 50px;"
                        ></el-image>
                      </div>
                      <div class="product-title">
                        <el-tooltip placement="top" effect="dark">
                          <div slot="content" class="tooltip-content">
                            商品名称：{{ scope.row.title }}<br />
                          </div>
                          <div class="ellipsis-text">{{ scope.row.title }}</div>
                        </el-tooltip>
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column property="totalPrice" label="支付价格"></el-table-column>
                <el-table-column property="goodsNum" label="购买数量"></el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="订单记录">
              <el-table :data="this.orderData.logData">
                <el-table-column property="order_id" label="订单ID"></el-table-column>
                <el-table-column property="records" label="操作记录"></el-table-column>
                <el-table-column property="create_time" label="操作时间"></el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </el-drawer>

  </div>
</template>

<script>
import { listOrder, getOrder, delOrder, addOrder, updateOrder, sellOrder, saveOrder, PayOrder, refundOrder, receiveOrder, saveOrderRemark } from "@/api/order/order";
import Vue from 'vue'

export default {
  name: "Order",
  data() {
    return {
      tableOrder: false,
      orderData:{
        memberData:{
          'wechat_nickname':"",
          'binding_phone':"",
        },
      },

      domainPrefix: process.env.VUE_APP_BASE_API,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 订单管理表格数据
      orderList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 弹出层标题（核销）
      titleSell: "",
      // 是否显示弹出层（核销）
      openSell: false,
      // 弹出层标题（修改订单）
      titleSave: "",
      // 是否显示弹出层（修改订单）
      openSave: false,
      // 弹出层标题（修改订单备注）
      titleRemark: "",
      // 是否显示弹出层（修改订单备注）
      openRemark: false,
      // 弹出层标题（订单退款）
      titleRefund: "",
      // 是否显示弹出层（订单退款）
      openRefund: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        orderSn: null,
        uid: null,
        sharerUid: null,
        realName: null,
        userPhone: null,
        userAddress: null,
        totalNum: null,
        totalPrice: null,
        payPrice: null,
        platformCommission: null,
        initiatorCommission: null,
        sharerCommission: null,
        partnerCommission: null,
        orderType: null,
        paid: null,
        payTime: null,
        payType: null,
        status: null,
        mark: null,
        verifyCode: null,
        verifyTime: null,
        verifyServiceId: null,
        transactionId: null,
        activityType: null,
        orderExtend: null,
        merId: null,
        isDel: null,
        verifyStatus: null,
        orderGoodsNames: null,
        createTime: null,
      },
      activityTypeOptions: [
        { value: 1, label: '普通订单' },
        { value: 2, label: '拼团订单' },
        /* { value: 3, label: '秒杀订单' },
        { value: 4, label: '砍价订单' },
        { value: 5, label: '预售订单' }, */
      ],
      payTypeOptions:[
        { value: 1, label: '微信支付' },
        { value: 2, label: '支付宝支付' },
        { value: 3, label: '余额支付' },
        { value: 4, label: '线下支付' },
      ],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      // 表单参数
      form: {},
      // 核销表单参数
      formSell: {},
      // 修改表单参数
      formSave: {},
      // 修改表单备注参数
      formRemark: {},
      // 表单退款参数
      formRefund: {},
      rulesSell: {
        verifyCode: [
          { required: true, message: "核销码不能为空", trigger: "blur" }
        ],
      },
      rulesSave: {
        payPrice: [
          { required: true, message: "金额不能为空", trigger: "blur" }
        ],
      },
      rulesRemark: {
        remark: [
          { required: true, message: "订单备注不能为空", trigger: "blur" }
        ],
      },
      // 表单校验
      rules: {
        orderSn: [
          { required: true, message: "订单号不能为空", trigger: "blur" }
        ],
        uid: [
          { required: true, message: "用户id不能为空", trigger: "blur" }
        ],
        totalNum: [
          { required: true, message: "订单商品总数不能为空", trigger: "blur" }
        ],
        totalPrice: [
          { required: true, message: "订单总价不能为空", trigger: "blur" }
        ],
        payPrice: [
          { required: true, message: "实际支付金额不能为空", trigger: "blur" }
        ],
        platformCommission: [
          { required: true, message: "平台方佣金不能为空", trigger: "blur" }
        ],
        initiatorCommission: [
          { required: true, message: "发起方佣金不能为空", trigger: "blur" }
        ],
        sharerCommission: [
          { required: true, message: "分享者佣金不能为空", trigger: "blur" }
        ],
        partnerCommission: [
          { required: true, message: "合作方佣金不能为空", trigger: "blur" }
        ],
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询订单管理列表 */
    getList() {
      this.loading = true;
      listOrder(this.queryParams).then(response => {
        this.total = response.data.total ?? 0;
        const data = response.data.data;

        // 提取转换函数
        const transformItem = (item) => {
          const activityTypeNameObj = getActivityTypeName(item);
          return {
            ...item,
            activityTypeNameObj, // 存储整个对象
            payType: getPayType(item),
            payPrice: getPayPrice(item),
            statusName: getStatusName(item),
            canEdit: item.paid === 1 ? false : true,
            payPriceDown:getPayPriceDown(item),
          };
        };

        const getActivityTypeName = (item) => {
          let color = 'rgb(178, 127, 235)'; // 默认颜色
          let name;
          switch (item.activityType) {
            case 1:
              name = item.orderType === 0 ? '[普通订单]' : '[核销订单]';
              color = item.orderType === 0 ? 'rgb(51, 51, 51)' : 'rgb(137, 86, 232)';
              break;
            case 2:
              if (item.activityStatus === '1') {
                name = '[拼团订单]';
                color = 'rgb(255, 125, 0)';
              } else if (item.activityStatus === '0') {
                name = '[拼团订单]进行中';
                color = 'rgb(255, 0, 0)';
              } else {
                name = '[拼团订单]未完成';
                color = 'rgb(255, 0, 255)';
              }
              break;
            case 3:
              name = '[秒杀订单]';
              color = 'rgb(52, 145, 250)';
              break;
            case 4:
              name = '[砍价订单]';
              color = 'rgb(247, 186, 30)';
              break;
            default:
              name = '[预售订单]';
              break;
          }
          return { name, color };
        };

        const getPayType = (item) => {
          if (item.paid === 1) {
            switch (item.payType) {
              case 0: return '余额支付';
              case 1: case 2: case 3: return '微信支付';
              case 4: return '支付宝支付';
              case 5: case 6: return '线下支付';
            }
          } else if (item.payType === 5 || item.payType === 6) {
            return '线下支付';
          }
          return '';
        };

        const getPayPrice = (item) => {
          return item.paid === 1 ? item.payPrice : '未支付';
        };

        const getPayPriceDown = (item) => {
          return item.payPrice;
        };

        const getStatusName = (item) => {
          if (item.paid === 1) {
            switch (item.status) {
              case 0: return '未发货';
              case 1: return '待收货';
              case 2: return '待评价';
              case 3: return '已完成';
              case 4: return '拼团中';
              default: return '已退款';
            }
          }
          return '未支付';
        };

        this.orderList = this.total > 0 ? data.map(transformItem) : data;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 取消按钮
    cancelSell() {
      this.openSell = false;
    },
    // 取消按钮
    cancelSave() {
      this.openSave = false;
    },
    // 取消按钮
    cancelRefund() {
      this.openRefund = false;
    },
    // 取消按钮
    cancelRemark() {
      this.openRemark = false;
    },
    // 表单重置
    reset() {
      this.form = {
        orderId: null,
        orderSn: null,
        uid: null,
        sharerUid: null,
        realName: null,
        userPhone: null,
        userAddress: null,
        totalNum: null,
        totalPrice: null,
        payPrice: null,
        platformCommission: null,
        initiatorCommission: null,
        sharerCommission: null,
        partnerCommission: null,
        orderType: null,
        paid: null,
        payTime: null,
        payType: null,
        createTime: null,
        status: null,
        mark: null,
        verifyCode: null,
        verifyTime: null,
        verifyServiceId: null,
        transactionId: null,
        activityType: null,
        orderExtend: null,
        merId: null,
        isDel: null,
        delFlag: null,
        verifyStatus: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.orderId)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加订单管理";
    },

    /** 核销按钮操作 */
    handleSell(){
      this.formSell = {};
      this.openSell = true;
      this.titleSell = "核销订单";
    },

    /** 核销按钮操作 */
    handleQuicklySell(row){
      console.log(row)
      const verifyCode = row.verifyCode;
      if(verifyCode){
        sellOrder(verifyCode).then(response => {
          this.$modal.msgSuccess("核销成功");
          this.getList();
        });
      }else{
        this.$modal.msgError("该笔订单暂不支持核销");
      }
    },

    /** 修改按钮操作 */
    handleUpdate(row) {
      const orderId = row.orderId || this.ids
      getOrder(orderId).then(response => {
        this.formSave = response.data;
        if (this.formSave.paid === 1) {
          console.log(this.formSave.paid);
          this.$modal.msgError("该订单已支付，无法修改！");
          this.getList();
          // 假设你有一个方法来更新表格中的 canEdit 属性
          this.updateCanEdit(row, false);
        } else {
          // 如果订单未支付，可以保持或设置 canEdit 为 true（如果需要的话）
          this.updateCanEdit(row, true);
          this.openSave = true;
          this.titleSave = "修改订单管理";
        }
      });
    },
    // 假设你有一个方法来更新表格中的 canEdit 属性
    updateCanEdit(row, canEdit) {
      // 这里你需要确保你的表格数据（可能是 this.orderList）是响应式的
      // 并且你能够正确地找到并更新对应的行
      const index = this.orderList.findIndex(item => item.orderId === row.orderId);
      if (index !== -1) {
        Vue.set(this.orderList[index], 'canEdit', canEdit);
      }
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.orderId != null) {
            updateOrder(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addOrder(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 订单核销提交按钮 */
    submitFormSell(){
      const verifyCode = this.formSell.verifyCode;
      if(verifyCode){
        sellOrder(verifyCode).then(response => {
          this.$modal.msgSuccess("核销成功");
          this.openSell = false;
          this.getList();
        });
      }else{
        this.$modal.msgError("请输入核销码");
      }
    },
    /** 订单修改提交按钮 */
    submitFormSave(){
      const payPrice = this.formSave.payPrice;
      const orderId = this.formSave.orderId;
      if(payPrice && orderId){//两个值同时存在
        saveOrder(orderId,payPrice).then(response => {
          this.$modal.msgSuccess("订单修改成功");
          this.openSave = false;
          this.getList();
        });
      }else{
        this.$modal.msgError("参数不能为空");
      }
    },

    /** 订单退款提交按钮 */
    submitFormRefund(){
      this.formRefund.orderRefundId = 0;
      refundOrder(this.formRefund).then(response => {
        this.$modal.msgSuccess("订单退款成功");
        this.openRefund = false;
        this.getList();
      });
    },

    /** 订单备注修改提交按钮 */
    submitFormRemark(){
      const remark = this.formRemark.remark;
      const orderId = this.formRemark.orderId;
      if(remark && orderId){//两个值同时存在
        saveOrderRemark(orderId,remark).then(response => {
          this.$modal.msgSuccess("订单备注修改成功");
          this.openRemark = false;
          this.getList();
        });
      }else{
        this.$modal.msgError("订单备注不能为空");
      }
    },

    // 更多操作触发
    handleCommand(command, row) {
      switch (command) {
        case "handleDetails":
          this.handleDetails(row);
          break;
        case "handleDelete":
          this.handleDelete(row);
          break;
        case "handlePayOrder":
          this.handlePayOrder(row);
          break;
        case "handleRefundOrder":
          this.handleRefundOrder(row);
          break;
        case "handleReceiveOrder":
          this.handleReceiveOrder(row);
          break;
        case "handleRemark":
          this.handleRemark(row);
          break;
        default:
          break;
      }
    },

    /** 订单已收货按钮操作 */
    handleReceiveOrder(row) {
      const orderIds = row.orderId || this.ids;
      this.$modal.confirm('是否确认收货订单管理编号为"' + orderIds + '"的数据项？').then(function() {
        return receiveOrder(orderIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("操作成功");
      }).catch(() => {});
    },

    /** 订单退款按钮操作 */
    handleRefundOrder(row) {
      this.formRefund = row;
      this.formRefund.payPrice = Number(this.formRefund.payPrice);
      this.openRefund = true;
      this.titleRefund = "订单退款";
    },

    /** 订单详情按钮操作 */
    handleDetails(row) {
      const orderId = row.orderId || this.ids
      getOrder(orderId).then(response => {
        this.orderData = response.data;
        console.log(this.orderData);
        // 定义状态码到状态名的映射表
        const statusMap = {
          0: '未发货',
          1: '待收货',
          2: '待评价',
          3: '已完成',
          4: '拼团中',
          // 可以添加其他状态码和对应的状态名
        };

        // 定义支付方式到支付名称的映射表
        const payTypeMap = {
          0: '余额支付',
          1: '微信支付',
          2: '微信支付', // 假设这里的1,2,3都是微信支付的不同类型，可以合并处理
          3: '微信支付',
          4: '支付宝支付',
          5: '线下支付',
          6: '线下支付', // 假设这里的5和6都是线下支付的不同类型，可以合并处理
          // 可以添加其他支付方式和对应的支付名称
        };

        // 根据paid和status设置getStatusName
        this.orderData.getStatusName = this.orderData.paid === 1
          ? statusMap[this.orderData.status] || '已退款' // 使用||来处理未知状态
          : '未支付';

        // 根据paid和payType设置payTypeName和payTime
        if (this.orderData.paid === 1) {
          this.orderData.payTypeName = payTypeMap[this.orderData.payType] || ''; // 使用||来处理未知支付方式
          // 如果需要，可以在这里设置payTime，否则保持为空
        } else {
          this.orderData.payTypeName = '';
          this.orderData.payTime = '';
        }
        this.tableOrder = true;
      });
    },

    /** 订单备注按钮操作 */
    handleRemark(row){
      const orderId = row.orderId || this.ids
      getOrder(orderId).then(response => {
        this.formRemark = response.data;
        this.openRemark = true;
        this.titleRemark = "修改订单备注";
      });
    },

    /** 立即付款按钮操作 */
    handlePayOrder(row){
      const orderIds = row.orderId || this.ids;
      this.$modal.confirm('是否确认付款订单管理编号为"' + orderIds + '"的数据项？').then(function() {
        return PayOrder(orderIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("操作成功");
      }).catch(() => {});
    },

    /** 删除按钮操作 */
    handleDelete(row) {
      const orderIds = row.orderId || this.ids;
      this.$modal.confirm('是否确认删除订单管理编号为"' + orderIds + '"的数据项？').then(function() {
        return delOrder(orderIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('system/order/export', {
        ...this.queryParams
      }, `order_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>
<style>
.el-drawer__header{
  margin-bottom: 16px;
}
.striping {
  border-bottom: 1px solid #ebeef5;
  padding-bottom: 10px;
}
.head{
  padding: 24px 35px;
}
.head .list {
  display: flex;
  margin-top: 20px;
  overflow: hidden;
  list-style: none;
  padding: 0;
}
.head .list .item {
  -webkit-box-flex: 0;
  flex: none;
  width: 200px;
  font-size: 14px;
  line-height: 14px;
  color: rgba(0,0,0,.85);
}
.head .list .item .title {
  margin-bottom: 12px;
  font-size: 13px;
  line-height: 13px;
  color: #666;
}
.head .full {
  display: flex;
  -webkit-box-align: center;
  align-items: center;
}
.order_icon {
  width: 60px;
  height: 60px;
}
.text {
  align-self: center;
  -webkit-box-flex: 1;
  flex: 1;
  min-width: 0;
  padding-left: 12px;
  font-size: 13px;
  color: #606266;
}
.mr20 {
  margin-right: 20px!important;
}
.text .title {
  margin-bottom: 10px;
  font-weight: 500;
  font-size: 16px;
  line-height: 16px;
  color: rgba(0,0,0,.85);
}
.self-adaption {
  overflow-y: auto;
  max-height: calc(100% - 50px);
}
.el-tabs__content {
  padding: 0 35px;
}
.section {
  padding: 25px 0;
  border-bottom: 1px dashed #eee;
}
.section .title {
  padding-left: 10px;
  border-left: 3px solid #0256ff;
  font-size: 15px;
  line-height: 15px;
  color: #303133;
}
.section .list {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
}
.section .item {
  padding-right: 20px;
  -webkit-box-flex: 0;
  flex: 0 0 33.3333333333%;
  display: flex;
  margin-top: 16px;
  font-size: 13px;
  color: #666;
}
.section .value {
  -webkit-box-flex: 1;
  flex: 1;
}

.product-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px; /* 根据需要调整 */
}

.product-info {
  display: flex;
  align-items: center;
}

.product-image {
  margin-right: 10px; /* 根据需要调整图片和名称之间的间距 */
}

.product-title {
  position: relative;
  flex: 1; /* 让标题占据剩余的空间 */
}

.ellipsis-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 限制显示的行数 */
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2em; /* 根据你的字体大小和行高调整 */
  max-height: 2.4em; /* 行数乘以行高 */
}

.tooltip-content {
  white-space: normal; /* 确保工具提示内容正常换行 */
}
.demo-table-expand {
  padding-left: 100px;
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #606266;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 30%!important;
}
.demo_label__label__font{
  width: 100px!important;
}
.demo_label__label__font__span {
  font-size: 13px;
  margin-top: 10px;
  line-height: 16px;
}
.demo_label__label__font__span__width-250{
  width: 245px;
}
.demo_label__label__font label {
  font-size: 13px!important;
  font-weight: normal;
}
.width-95 label {
  width: 95px!important;
}
.width-70 label {
  width: 70px!important;
}
.width-55 label {
  width: 55px!important;
}
.width-45 label {
  width: 45px!important;
}
</style>
